<template>
  <div class="section line-chart"></div>
</template>

<script>
import { echartsMixin } from '@/utils/mixin'

const chartData = {
  users: {
    title: '新用户统计',
    themeColor: '#40c9c6',
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  message: {
    title: '留言统计',
    themeColor: '#36a3f7',
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  sales: {
    title: '销售额统计',
    themeColor: '#f4516c',
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  cart: {
    title: '销售量统计',
    themeColor: '#FFB980',
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}
export default {
  mixins: [echartsMixin()],
  props: {
    chartType: {
      type: String,
      default: 'users'
    }
  },
  methods: {
    setOptions(chartData) {
      const { title, themeColor, expectedData, actualData } = chartData
      this.chart.setOption({
        title: {
          text: title,
          x: 'center',
          textStyle: {
            color: themeColor
          }
        },
        xAxis: {
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 80,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['expected', 'actual'],
          top: '40',
          x: 'center'
        },
        series: [
          {
            name: 'expected',
            itemStyle: {
              normal: {
                color: '#FF005A',
                lineStyle: {
                  color: '#FF005A',
                  width: 2
                }
              }
            },
            smooth: true,
            type: 'line',
            data: expectedData,
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          },
          {
            name: 'actual',
            smooth: true,
            type: 'line',
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            data: actualData,
            animationDuration: 2800,
            animationEasing: 'quadraticOut'
          }
        ]
      })
    }
  },
  mounted() {
    this.setOptions(chartData[this.chartType])
  },
  watch: {
    chartType(type) {
      this.setOptions(chartData[type])
    }
  }
}
</script>

<style lang="stylus" scoped>
.line-chart
  width 100%
  height 500px
</style>
